<template>
    <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="form1Ref" :rules="rules">
  
        <el-form-item label="名称" prop="name" label-width="80px">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="副标题" prop="name" label-width="80px">
          <el-input v-model="formData.subName" :rows="2" type="textarea" />
        </el-form-item>
        <el-form-item label="图片" prop="img" label-width="80px">
          <el-space wrap>
            <Tuku v-model="formData.img1" />
          <Tuku v-model="formData.img2" />
          <Tuku v-model="formData.img3" />
          <Tuku v-model="formData.img4" />
          <Tuku v-model="formData.img5" />
        </el-space>
          
        </el-form-item>
        <el-form-item label="价格" label-width="80px">
            <el-button type="primary" @click="drawer = true">维护价格</el-button>
        </el-form-item>
        <el-form-item label="分类" label-width="80px">
           
            <CategoryTree v-model="formData.categoryId" ></CategoryTree>
           
        </el-form-item>
        <el-form-item label="状态" label-width="80px"> 
          <Enum v-model="formData.status" enumName="CategoryStatus"></Enum>
        </el-form-item>
        <el-form-item label="排序" label-width="80px">
          <el-input-number :min="0" v-model="formData.seq" />
        </el-form-item>
        <el-form-item label="标签" label-width="80px">
          <el-space wrap>
                <el-tag v-for="tag in formData.tags" :key="tag" closable @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
            </el-space>


            <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" size="small"
                @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
            <el-button v-else class="button-new-tag" size="small" @click="showInput">
                + 新标签
            </el-button>
        </el-form-item>
        <el-form-item label="详情" label-width="80px">
          <el-input v-model="formData.brief" :rows="5" type="textarea"/>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button type="primary" @click="submitForm()">保存</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-drawer v-model="drawer" title="维护价格" size="60%">
        <el-form :inline="true" :model="formData2" class="demo-form-inline">

            <el-form-item>
                <el-input-number v-model="formData2.price" :precision="2" :step="0.1" min="0" placeholder="请输入价格"
                    clearable />
            </el-form-item>
            <el-form-item>
                <el-input v-model="formData2.brief" placeholder="请输入备注" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onAddPrice">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column fixed prop="id" label="编号" width="60" />
            <el-table-column fixed prop="price" label="价格" width="120" />
            <el-table-column prop="brief" label="备注" width="200" show-overflow-tooltip />

            <el-table-column prop="lastUpdateBy" label="更新人" width="120" />
            <el-table-column prop="lastUpdateTime" label="更新时间" width="160" />


        </el-table>
    </el-drawer>
  </template>
  <script setup lang="ts">
  import Tuku from '@/components/Tuku.vue';
  import Enum from '@/components/Enum.vue';
  import { onMounted, reactive, ref } from 'vue';
  import { productApi } from '@/api';
  import { productPriceApi } from '@/api';
  import { ElMessage } from 'element-plus';
  import CategoryTree from '@/components/CategoryTree.vue';
  import {useRouter,useRoute} from 'vue-router'
    const router =useRouter()
    const route = useRoute()
  const form1Ref = ref()
  const formData = reactive<any>({
  id:0,
  name: '',
  subName: "",
  img1: '',
  img2: '',
  img3: '',
  img4: '',
  img5: '',
  status:0,
  categoryId:0,
  seq:1,
  brief: '',
  tags: []
  })
const formData2 = reactive({
  price:0,
  brief:""
  
})
const callPriceApi = () => {
    productPriceApi.select.call({ productId: formData.id }).then((data: any) => {
        tableData.value = data
    })
}
const tableData = ref<any>([])
const onAddPrice=()=>{
  setStatus()
  productPriceApi.add.call({
    productId:formData.id,
    price:formData2.price,
    brief:formData2.brief
  }).then((data:any)=>{
    ElMessage.success("保存成功")
    callPriceApi()
  })
  
}
const setStatus=()=>{
  productPriceApi.update.call().then((data:any)=>{
  })
}
const drawer = ref(false)
  const inputValue = ref('')
const inputVisible = ref(false)
const handleClose = (tag: string) => {
    formData.tags.splice(formData.tags.indexOf(tag), 1)
}
const handleInputConfirm = () => {
    if (inputValue.value) {
        formData.tags.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
const showInput = () => {
    inputVisible.value = true
}
  
  const submit = () => {
    let imgArray=[]
    for(let i=1;i<=5;i++){
      if(formData['img'+i]!=""){
        imgArray.push(formData['img'+i])
      }
    }
    if(imgArray.length==0){
      ElMessage.error("请上传图片")
      return
    }
    
    let params={
      id:formData.id,
      name: formData.name,
      subName: formData.subName,
      img: imgArray,
      status:formData.status,
      categoryId:formData.categoryId,
      seq:formData.seq,
      brief: formData.brief,
      tags: formData.tags
    }
    productApi.update.call(params).then(()=>{
    ElMessage.success("保存成功")
    
  })
  
  }
  onMounted(()=>{
    formData.id=route.query.id===undefined?0:Number(route.query.id)
    callApi()
  })

  const callApi=()=>{
    productApi.select.call({id:formData.id}).then((res:any)=>{
      res=res[0]
      formData.id=res.id
      formData.name = res.name
      formData.subName = res.subName
      formData.brief = res.brief
      formData.tags = res.tags
      formData.status = res.status
      formData.categoryId = res.categoryId
      formData.seq = res.seq
      for(let i=1;i<=5;i++){
        formData['img'+i]=res.img[i-1]
      }
      
    })
    callPriceApi()
  
  }
  
  
  const rules = {
     name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    
  }
  const submitForm = async () => {
  
    await form1Ref.value.validate((valid: any, fields: any) => {
        if (valid) {
            submit()
        }
    })
  }
  const resetForm = () => {
  
  }
  </script>
  